<template>
    <div class="crumbs-wrap">
        <ul>
            <li v-for="item in crumbsList" :key="item.path">
                <span>{{ item?.meta?.title }}</span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { watch, ref } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()
const currentRouter = router.currentRoute.value

const crumbsList = ref([])

const getRouterMatched = () => {
    crumbsList.value = router.currentRoute.value?.matched
}
getRouterMatched()

watch(() => router.currentRoute.value, (val) => {
    getRouterMatched()
})







</script>
<style lang="scss" scoped>
.crumbs-wrap {
    position: relative;
    z-index: 1;
    height: 48px;
    background-color: #fff;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 20px;
    display: flex;
    align-items: center;
    ul {
        margin-bottom: 0;
        display: flex;
        align-items: center;
        color: var(--gray-9);
    }
    li {
        display: flex;
        align-items: center;
        &::after {
            content: "";
            display: block;
            width: 7px;
            height: 7px;
            margin: 0 14px 0 10px;
            border-top: 1px solid #000;
            border-right: 1px solid #000;
            transform: rotate(45deg);
            opacity: .3;
        }
        &:last-child {
            color: var(--gray-3);
            &::after { display: none; }
        }
    }
    i {
        display: block;
        width: 7px;
        height: 7px;
        margin: 0 10px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
        opacity: .3;
    }
    span {
        
    }
}
</style>